<template>
  <el-dialog
    :title="config.title"
    class="lan-dialog-container"
    :visible.sync="config.dialogVisible"
    :width="config.width+'px'"
  >
    <lan-form
      :config="config"
      :formData="formData"
      ref="dialogForm"
    >
      <template
        v-for="item in config.formList.filter((item) => item.type === 'slot')"
        #[item.name]
      >
        <slot
          :name="item.name"
          :data="formData"
        ></slot>
      </template>
    </lan-form>
    <span slot="footer">
      <el-button
        v-for="(button, index) in config.buttons"
        :key="index"
        :icon="button.icon.includes('el-icon') ? button.icon : ''"
        :class="[button.type ? 'buttons-' + button.type : '']"
        :type="button.type"
        :size="button.size"
        :plain="button.plain"
        :round="button.round"
        :circle="button.circle"
        @click="button.method"
        :loading="button.isLoadingButton ? config.btnLoading : false"
      >
        <svg-icon
          v-if="button.icon && !button.icon.includes('el-icon')"
          :icon-class="button.icon"
          class="svg-icon"
        ></svg-icon>{{ button.text }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import lanForm from './lanForm';

export default {
  components: { lanForm },
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    'config.dialogVisible': {
      handler(value) {
        if (!value) this.$refs.dialogForm.resetFields();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.lan-dialog-container {
  /deep/.el-form-item {
    // border-bottom: 42px;
  }
  .el-tooltip {
    margin-right: 10px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .el-date-editor {
    width: 250px;
  }
}
</style>
